<template>
  <div class="mane">
    <el-row :gutter="20">
      <el-col v-for="item in items" :span="6">

        <div class="grid-content bg-purple">
          <div class="content-wrapper">
            <div class="text-container">
              <span class="text-text">{{ item.text }}</span>
              <span class="text-title">{{ item.count || 0 }}</span>
            </div>
            <img v-if="item.src" :src="item.src" alt="签约家医" style="width: 60px; height: 60px" />
          </div>
        </div>

      </el-col>
    </el-row>

    <div class="full-height">
      <el-row>
        <el-col :span="18">
          <!-- 常用工具 -->
          <div v-if="!isYcxwjwRole" :style="{ width: '100%', height: toolHeight, padding: '16px 8px 8px 16px' }">
            <div class="bor_xiao">
              <span class="text-wenb" style="">常用工具</span>
              <el-row :gutter="90">
                <el-col v-for="item in tool" :span="4" :key="item.id">
                  <div style="width: 100%;height: 20px;"></div>
                  <div @click="navigate(item.text)" class="img-src clickable">
                    <img v-if="item.src" :src="item.src" alt="签约家医" class="icon" />
                    <span class="text">{{ item.text }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 待办事项 -->
          <div :style="{ height: todoHeight, padding: '17px 8px 8px 16px' }">
            <div class="bor_xiao">
              <apan class="text-wenb">待办事项</apan>
              <div v-for="(category, index) in categories" :key="index" class="todo-category">
                <div class="category-title">{{ category.title }}</div>
                <div class="todo-list">
                  <div v-for="(item, idx) in category.items" :key="idx" class="todo-item">
                    <span class="todo-label">{{ item.label }}</span>
                    <span class="todo-count">{{ item.count }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <!--          消息通知-->
          <div style="height: 61vh ;padding: 16px 16px 8px 8px">
            <div class="bor_xiao">
              <div class="tool">
                <span class="text-wenb">消息通知</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="width: 100%;height: 13vh;padding: 8px 16px 16px 16px">
            <div class="bor_xiao">
              <span class="text-wenb">子系统发入口</span>
              <el-row>
                <el-col v-for="item in foot" :span="8" @click="handleClickItem(item, index)">
                  <div class="xitong">
                    <img v-if="item.src" :src="item.src" alt="签约家医" class="icon" />
                    <span class="text">{{ item.text }}</span>

                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script>
import img1 from '@/assets/images/img/dj.png'; // 假设这是登记居民的图片
import img2 from '@/assets/images/img/qy.png'; // 假设这是签约居民的图片
import img3 from '@/assets/images/img/jd.png'; // 假设这是建档人数的图片
import img4 from '@/assets/images/img/zl.png'; // 假设这是诊疗人数的图片
import src1 from '@/assets/images/img/signature.png'; //签约
import src2 from '@/assets/images/img/archive.png'; //档案
import src3 from '@/assets/images/img/tion.png'; //挂号
import src4 from '@/assets/images/img/bed.png'; //病床
import src5 from '@/assets/images/img/transfer.png'; //转诊
import src6 from '@/assets/images/img/remote.png'; //远程

import tu1 from '@/assets/images/img/xt1.png'; //一
import tu2 from '@/assets/images/img/xt2.png'; //一
import tu3 from '@/assets/images/img/xt3.png'; //一
import { navigateWithToken, jiatingYishengToken } from '@/api/rote/gwindex';
import { getWorkbenchStatistics, getEffectTime, getIndexStatictics } from '@/api/integration/workbench/index';
import store from '@/store/index';

export default {

  name: 'Index',
  data() {
    return {
      src1: src1,
      src2: src2,
      src3: src3,
      src4: src4,
      src5: src5,
      src6: src6,
      img1: img1,
      img2: img2,
      img3: img3,
      img4: img4,
      tu1: tu1,
      tu2: tu2,
      tu3: tu3,
      userRoles: [], // 用户角色
      isYcxwjwRole: false, // 是否是 ycxwjw 角色
      toolHeight: '18vh', // 默认常用工具高度
      todoHeight: '48vh', // 默认待办事项高度
      deptId: store.state.value.user.deptId,
      categories: [
        {
          title: '签约',
          items: [
            { label: '签约即将过期', count: '-' },
            { label: '签约已过时效', count: '-' }
          ]
        },
        {
          title: '基本公卫',
          items: [
            { label: '老年人待体检', count: 0, title: 'elderlyToBeExamined' },
            { label: '高血压待体检', count: 0, title: 'hypertensionToBeExamined' },
            { label: '糖尿病待体检', count: 0, title: 'diabetesToBeExamined' },
            { label: '高血压待随访', count: 0, title: 'hypertensionToBeFollowed' },
            { label: '糖尿病待随访', count: 0, title: 'diabetesToBeFollowed' }
          ]
        },
        {
          title: '绩效考核',
          items: [
            { label: '待初审', count: '-' },
            { label: '待复核', count: '-' },
            { label: '待资料上传', count: '-' }
          ]
        },
        {
          title: '基本医疗',
          items: [
            { label: '待接诊', count: '-' },
            { label: '待审批机构', count: '-' },
            { label: '待审批建床', count: '-' }
          ]
        }
      ],

      tool: [
        { text: '签约家医', src: src1 },
        { text: '公卫建档', src: src2 },
        { text: '患者挂号', src: src3 },
        { text: '家庭病床申请', src: src4 },
        { text: '在线转诊', src: src5 },
        { text: '远程会诊', src: src6 }
      ],
      toolPathMapping: {
        '签约家医': '/doctor.php/contract/user/start',
        '公卫建档': '/basicPublic/healthRecord'
      },
      items: [
        { text: '登记居民', count: '-', src: img1, title: 'diabetesToBeExamined' },
        { text: '签约居民', count: '-', src: img2, title: 'contractedResidents' },
        { text: '建档人数', count: '-', src: img3, title: 'filingPeople' },
        { text: '诊疗人数', count: '-', src: img4, title: '' }
      ],
      foot: [
        { text: '基本公共卫生服务系统', src: tu1 },
        { text: '家庭医生签约服务系统', src: tu2 },
        { text: '基本公卫绩效考核系统', src: tu3 }
      ],
      form: {
        diabetesToBeExamined: undefined,
        diabetesToBeFollowed: undefined,
        elderlyToBeExamined: undefined,
        filingPeople: undefined,
        hypertensionToBeExamined: undefined,
        hypertensionToBeFollowed: undefined,
        registerResident: undefined
      }
    };
  },

  methods: {
    loadUserRoles() {
      const storedUsername = localStorage.getItem('username');

      if (storedUsername === 'ycxwjw') {
        this.isYcxwjwRole = true;
        this.toolHeight = '0vh';
        this.todoHeight = '61vh';
      } else {
        this.isYcxwjwRole = false;
        this.toolHeight = '16vh';
        this.todoHeight = '45vh';
      }
    },
    getData() {
      getWorkbenchStatistics().then(res => {
        this.form = res.data;
        this.categories.forEach(item => {
          if (item.title === '基本公卫') {
            item.items.forEach(it => {
              it.count = res.data[it.title];
            });
          }
        });
        this.items.forEach(ite => {
          ite.count = res.data[ite.title];
        });
      });

      getEffectTime({}).then(res => {
        console.log(res.data);
        this.categories.forEach(item => {
          if (item.title === '签约') {
            item.items[0].count = res.data.about_to_expire;
            item.items[1].count = res.data.exceed;
          }
        });
      });
    },

    handleClick() {
      const token = localStorage.getItem('Admin-Token');
      const linkPath = import.meta.env.VITE_PUBLIC_PATH;
      window.open(`${linkPath}?token=${encodeURIComponent(token)}`);
    },
    handleClicks() {
      const token = localStorage.getItem('Admin-Token');
      const clientId = import.meta.env.VITE_APP_CLIENT_ID;
      const linkPath = import.meta.env.VITE_HOME_PATH;
      window.open(
        `${linkPath}${encodeURIComponent(token)}&clientid=${clientId}`
      );
    },
    handleClickItem(item, index) {
      // 根据 item 的属性或者 index 来选择跳转逻辑
      switch (item.text) {
        case '基本公共卫生服务系统':
          this.handleClick();
          break;
        case '家庭医生签约服务系统':
          this.handleClicks();
          break;
        default:
          console.log('Unknown item clicked:', item);
      }
    },
    navigate(text) {

      if (text === '签约家医') {
        const path = this.toolPathMapping[text];
        if (path) {
          jiatingYishengToken(path);
        } else {
          console.error('未找到对应路径:', text);
        }

      } else {
        const path = this.toolPathMapping[text];
        if (path) {
          navigateWithToken(path);
        } else {
          console.error('未找到对应路径:', text);
        }
      }
    }
  },
  // mounted() {
  //   this.navigate('签约居民'); // 直接测试
  // },
  created() {
    this.loadUserRoles();
    this.getData();
  }

};
</script>

<style scoped>
.bor_xiao {
  border: 1px solid #e5e6e7;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: relative;
}

.mane {
  padding: 10px;
  background: #e5e6e7;
  /*border: #f8ac59 solid 1px;*/
}

.el-row {
  margin-bottom: 20px;

  & :last-child {
    margin-bottom: 0;
  }

}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #fff;
  /*border: #0DA929 solid 1px;*/
  /*margin: 10px;*/
}

.grid-content {
  border-radius: 4px;
  min-height: 120px;
  padding: 10px;
}

.grid-contents {
  border-radius: 4px;
  /*min-height: 120px;*/
  /*padding: 10px;*/
}

.row-bg {
  padding: 10px 0;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.content-wrapper img {
  margin-right: 60px;
  width: 90px;
  height: 90px;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 30px;
}

.text {
  font-size: 14px;
  color: #2b2f3a;
  /*margin-bottom: 5px;*/
}

.el-aside {
  /*background-color: #fff;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

.full-height {
  background: #fff;
  /*border: red 1px solid;*/
  /*background: #f8ac59;*/
  border-radius: 10px;
  height: 74.5vh;
  /*box-sizing: border-box; */

}

/*.el-footer {*/
/*  height: auto; !* 或者指定一个具体的高度 *!*/
/*  width: 100%; !* 确保宽度为100% *!*/
/*}*/


.aside-full-height {
  border: #e5e6e7 1px solid;
  border-radius: 10px;
  margin: 20px 20px 20px 0px;
  /*background: #fff;*/
  width: 30%;
  /*height: 100%;*/
  background-color: #0DA929;
}

.icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  /*border: #0DA929 solid 1px;*/
}

.img-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.text-text {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #606266;
}

.img-src {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100% - 40px);
  /* 确保父容器有明确的高度 */
  text-align: center;
  padding: 20px;
  /* 可选：给容器内部一些填充 */
}

.grid-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
}

.todo-section {
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #ebeef5;
  /*border-radius: 4px;*/
}

.todo-section span {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.text-title {
  font-weight: bold;
  font-size: 30px;
}

/* 待办事项样式 */

.text-wenb {
  font-size: 14px;
  color: black;
  font-weight: bold;
  /*margin-bottom: 10px;*/
  /*border: #2c3e50 solid 1px;*/
  position: absolute;
  top: 10px;
  left: 20px;
}

.todo-category {
  display: flex;
  align-items: center;
  border-bottom: #e5e6e7 1px solid;
  padding: 10px;
  height: 25%;

  & :last-child {
    border-bottom: none;
  }

}

.category-content {
  display: flex;
  align-items: flex-start;
  /* 确保内容对齐 */
}

.category-title {
  display: flex;
  justify-content: center;
  width: 15%;
  font-size: 15px;
  color: #999;
}

.todo-list {
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.todo-item {
  display: flex;
  align-items: center;
}

.todo-label {
  width: 110px;
  font-size: 15px;
  color: #333;
  margin-right: 30px;
}

.todo-count {
  width: 60px;
  font-weight: bold;
  font-size: 15px;
  color: #f8ac59;
  margin-right: 30px;
}

.xitong {
  margin: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  /*border: #0DA929 1px solid;*/
}

.tool {
  /*border: #e5e6e7 1px solid;*/
  /*border: #f8ac59 1px solid;*/
  /*padding: 15px;*/

  /*border-radius: 10px;*/
  /*margin-bottom: 15px;*/
}

.tools {
  border: #e5e6e7 1px solid;
  border-radius: 10px;
}

.foot {
  border: #e5e6e7 1px solid;
  border-radius: 10px;
  margin-top: 10px;
}
</style>
